<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: #ddd;
        }
       
    </style>
</head>
<body>
    <canvas class="canvas1" width="500" height="500"></canvas>
    <button class="btn-play">  播放</button>
    <script>
        let cav = document.querySelector('canvas')
        // 获取上下文对象（画笔）
        let ctx = cav.getContext('2d')
        // 线条绘制
        // 起始点
        // ctx.moveTo(250,250)
        // // 结束点
        // ctx.lineTo(250,500)
        // ctx.lineTo(0,500)
        // ctx.lineTo(0,250)
        // // 线条封闭
        // ctx.closePath()
        // // 设置线条颜色
        // ctx.strokeStyle = 'red'
        // // 填充颜色
        // ctx.fillStyle = 'yellow'
        // // 填充
        // ctx.fill()
        // // 绘制线条
        // ctx.stroke()

        // 矩形绘制
        // 绘制普通矩形  rect(x,y,width,height)
        // ctx.rect(125,125,100,100)
        // // 线条颜色
        // ctx.strokeStyle = 'red'
        // // 填充颜色
        // ctx.fillStyle = 'yellow'
        // ctx.fill()
        // // 线条粗细
        // ctx.lineWidth = 10
        // ctx.stroke()

        // 绘制填充矩形
        // ctx.fillStyle = 'red'
        // ctx.fillRect(125,125,100,100,)
        // // 清除指定区域
        // ctx.clearRect(150,150,40,20)

        // 绘制圆弧 arc(x,y,r,sAngle,eAngle,counterclockwise)
                    // x,y | 圆心的坐标
                    // r | 圆的半径
                    // sAngle| 起始弧度
                    // eAngle | 结束弧度<br>弧度 = Math.PI/180*角度
                    // counterclockwise | 可选。true逆时针,false顺时针
        // ctx.arc(250,250,50,0,Math.PI/180*50)
        // ctx.stroke()
        // 绘制扇形
        // ctx.moveTo(0,0)
        // ctx.arc(0,0,200,0,Math.PI/180*90)
        // ctx.closePath()
        // ctx.stroke()

        // 绘制文本
        // 文本字体
        // ctx.font = '50px normal'
        // // 文本对齐方式
        // ctx.textAlign = 'center'
        // // 设置或返回文本的基线 top | bottom | middle
        // ctx.textBaseline = 'middle'
        // // 绘制填充文本
        // // ctx.fillStyle = 'red'
        // // ctx.fillText('标题1',250,250)
        // // 绘制线条文本
        // ctx.strokeStyle = 'yellow'
        // ctx.strokeText('标题2',300,300)
        // ctx.stroke()


        // 绘制图片
        // drawImage(img,x,y,width,height)
            // 参数 | 描述
            // ---|---
            // img | 要使用的图像、视频
            // x | 绘制的起始位置x坐标
            // y | 绘制的起始位置y坐标
            // width | 可选。宽度
            // height | 可选。高度
        // let img = new Image()
        // img.src = 'img/pic1.png'
        // img.onload = () =>{
        //     ctx.drawImage(img,200,200,200,150)
        // }

        // 视频绘制
        let video = document.createElement('video'),
            btn = document.querySelector('.btn-play')
        video.src = 'img/video'
        video.controls = true
        btn.addEventListener('click',()=>{
            if(video.paused){
                video.play()
            }else{
                video.pause()
            }
        })
        video.style.display = 'none'
        document.body.appendChild(video)
        let timer = null
        video.onplay = () => {
            timer = setInterval(() => {
                ctx.drawImage(video, 0, 0, 400, 300)
            }, 20)
        }
        video.onpause = () => {
        clearInterval(timer)
        }

        


    </script>
</body>
</html>